<template>
	<view class="page">
		<!-- 轮播图start -->
		<swiper :indicator-dots="true" :autoplay="true" class="carousel">
			<swiper-item v-for="carousel in carouselList" :key=index>
				<image :src="carousel.image" class="carousel"></image>
			</swiper-item>
		</swiper>
		<!-- 轮播图end -->

		<!-- 热门超英start -->
		<!-- 标题 -->
		<view class="page-block spuer-hot">
			<view class="hot-title-wapper">
				<image src="../../static/icos/hot.png" class="hot-ico"></image>
				<view class="hot-title">热门超英</view>
			</view>
		</view>
		<scroll-view scroll-x="true" class="page-block hot">
			<view class="single-poster" v-for="hotSuperhero in hotSuperheroList" :key=index>
				<view class="poster-wapper">
					<image :src="hotSuperhero.cover" class="poster"></image>
					<view class="movie-name">
						{{hotSuperhero.name}}
					</view>
					<!-- 五星评分组件 -->
					<trailerStars :score="hotSuperhero.score" showNum="1"></trailerStars>
				</view>

			</view>
		</scroll-view>
		<!-- 热门超英end -->

		<!-- 热门预告start -->
		<!-- 标题 -->
		<view class="page-block spuer-hot">
			<view class="hot-title-wapper">
				<image src="../../static/icos/interest.png" class="hot-ico"></image>
				<view class="hot-title">热门预告</view>
			</view>
		</view>

		<view class="hot-movies">
			<video :id="trailer.id" :data-playingindex="trailer.id" @play="meIsPlaying" class="hot-movie-single"
				v-for="trailer in trailerList" :key=index :src="trailer.trailer" :poster="trailer.poster"
				controls></video>
		</view>
		<!-- 热门预告end -->

		<!-- 猜你喜欢start -->
		<view class="page-block spuer-hot">
			<view class="hot-title-wapper">
				<image src="../../static/icos/guess-u-like.png" class="hot-ico"></image>
				<view class="hot-title">猜你喜欢</view>
			</view>
		</view>

		<view class="page-block guess-u-like">
			<view class="single-like-movie" v-for="(guessULike,gIndex) in guessULikeList">
				<image :src="guessULike.cover" class="like-movie"></image>
				<view class="movie-desc">
					<view class="movie-title">
						{{guessULike.name}}
					</view>
					<!-- 五星评分组件 -->
					<trailerStars :score="guessULike.score" showNum="0"></trailerStars>
					<view class="movie-info">
						{{guessULike.basicInfo}}
					</view>
					<view class="movie-info">
						{{guessULike.releaseDate}}
					</view>
				</view>
				<view class="movie-oper" :data-gIndex="gIndex" @click="praiseMe(gIndex)">
					<image src="../../static/icos/praise.png" class="praise-ico"></image>
					<view class="praise-me">
						赞我
					</view>
					<view :animation="animationDataArr[gIndex]" class="praise-me animation-opacity">
						+1
					</view>
				</view>

			</view>

		</view>

		<!-- 猜你喜欢end -->
	</view>
</template>

<script>
	import trailerStars from '../../components/trailerStars.vue'
	export default {
		data() {
			return {
				// 动画属性
				animationData: {},
				// 定义5个元素的空数组
				animationDataArr: [{}, {}, {}, {}, {}],
				// 轮播图
				carouselList: [{
						"id": 1,
						"movieID": "",
						"image": "https://images.weserv.nl/?url=img1.doubanio.com/view/photo/l/public/p2410755737.webp",
						"sort": 1,
						"isShow": 1
					},
					{
						"id": 2,
						"movieID": "",
						"image": "https://images.weserv.nl/?url=//img3.doubanio.com/view/photo/l/public/p2556561071.webp",
						"sort": 1,
						"isShow": 1
					},
					{
						"id": 3,
						"movieID": "",
						"image": "https://images.weserv.nl/?url=img1.doubanio.com/view/photo/l/public/p2559849368.webp",
						"sort": 1,
						"isShow": 1
					},
					{
						"id": 4,
						"movieID": "",
						"image": "https://images.weserv.nl/?url=img3.doubanio.com/view/photo/l/public/p2432517600.webp",
						"sort": 1,
						"isShow": 1
					}
				],
				// 热门超英
				hotSuperheroList: [{
						id: 'dc-004',
						name: '蝙蝠侠:黑暗骑士崛起',
						poster: 'http://122.152.205.72:88/superhero/DC/BatManTheDarkKnightRises/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/DC/BatManTheDarkKnightRises/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/DC/BatManTheDarkKnightRises/trailer.mp4',
						score: 9.1
					},
					{
						id: 'marvel-1026',
						name: '毒液:致命守护者',
						poster: 'http://122.152.205.72:88/superhero/MARVEL/Venom/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/MARVEL/Venom/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/MARVEL/Venom/trailer.mp4',
						score: 9.9
					},
					{
						id: 'marvel-1005',
						name: '复仇者联盟3:无限战争',
						poster: 'http://122.152.205.72:88/superhero/MARVEL/Avengers3/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/MARVEL/Avengers3/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/MARVEL/Avengers3/trailer.mp4',
						score: 8.8
					},
					{
						id: 'marvel-1016',
						name: '银河护卫队2',
						poster: 'http://122.152.205.72:88/superhero/MARVEL/GuardiansOfTheGalaxy2/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/MARVEL/GuardiansOfTheGalaxy2/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/MARVEL/GuardiansOfTheGalaxy2/trailer.mp4',
						score: 8.5
					},
					{
						id: 'marvel-1018',
						name: '钢铁侠3',
						poster: 'http://122.152.205.72:88/superhero/MARVEL/IronMan3/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/MARVEL/IronMan3/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/MARVEL/IronMan3/trailer.mp4',
						score: 8.5
					},
					{
						id: 'marvel-1029',
						name: '雷神3:诸神的黄昏',
						poster: 'http://122.152.205.72:88/superhero/MARVEL/Thor3/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/MARVEL/Thor3/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/MARVEL/Thor3/trailer.mp4',
						score: 8.5
					},
					{
						id: 'marvel-1022',
						name: '蜘蛛侠:英雄归来',
						poster: 'http://122.152.205.72:88/superhero/MARVEL/SpiderManHomecoming/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/MARVEL/SpiderManHomecoming/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/MARVEL/SpiderManHomecoming/trailer.mp4',
						score: 8.0
					},
					{
						id: 'marvel-1023',
						name: '绿巨人',
						poster: 'http://122.152.205.72:88/superhero/DC/GreenLantern/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/DC/GreenLantern/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/DC/GreenLantern/trailer.mp4',
						score: 7.5
					},
					{
						id: 'xman-1007',
						name: '金刚狼:殊死一战',
						poster: 'http://122.152.205.72:88/superhero/xman/Logan/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/xman/Logan/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/xman/Logan/trailer.mp4',
						score: 5.9
					},
					{
						id: 'dc-1011',
						name: '沙赞',
						poster: 'http://122.152.205.72:88/superhero/DC/Shazam/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/DC/Shazam/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/DC/Shazam/trailer.mp4',
						score: 6.0
					},
					{
						id: 'marvel-1016',
						name: '复仇者联盟4:终极之战',
						poster: 'http://122.152.205.72:88/superhero/MARVEL/Avengers4/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/MARVEL/Avengers4/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/MARVEL/Avengers4/trailer.mp4',
						score: 7.3
					},
					{
						id: 'xman-1010',
						name: 'X战警:新变种人',
						poster: 'http://122.152.205.72:88/superhero/xman/TheNewMutants/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/xman/TheNewMutants/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/xman/TheNewMutants/trailer.mp4',
						score: 5.5
					},
					{
						id: 'marvel-1020',
						name: '蜘蛛侠2004',
						poster: 'http://122.152.205.72:88/superhero/MARVEL/SpiderMan2004/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/MARVEL/SpiderMan2004/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/MARVEL/SpiderMan2004/trailer.mp4',
						score: 6.9
					},
					{
						id: 'marvel-1003',
						name: '复仇者联盟',
						poster: 'http://122.152.205.72:88/superhero/MARVEL/Avengers1/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/MARVEL/Avengers1/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/MARVEL/Avengers1/trailer.mp4',
						score: 8.9
					}
				],
				// 热门预告
				trailerList: [{
						id: 'marvel-1018',
						name: '钢铁侠3',
						poster: 'http://122.152.205.72:88/superhero/MARVEL/IronMan3/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/MARVEL/IronMan3/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/MARVEL/IronMan3/trailer.mp4',
						score: 8.5
					},
					{
						id: 'marvel-1029',
						name: '雷神3:诸神的黄昏',
						poster: 'http://122.152.205.72:88/superhero/MARVEL/Thor3/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/MARVEL/Thor3/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/MARVEL/Thor3/trailer.mp4',
						score: 8.5
					},
					{
						id: 'marvel-1022',
						name: '蜘蛛侠:英雄归来',
						poster: 'http://122.152.205.72:88/superhero/MARVEL/SpiderManHomecoming/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/MARVEL/SpiderManHomecoming/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/MARVEL/SpiderManHomecoming/trailer.mp4',
						score: 8.5
					},
					{
						id: 'dc-004',
						name: '蝙蝠侠:黑暗骑士崛起',
						poster: 'http://122.152.205.72:88/superhero/DC/BatManTheDarkKnightRises/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/DC/BatManTheDarkKnightRises/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/DC/BatManTheDarkKnightRises/trailer.mp4',
						score: 9.1
					}
				],
				// 猜你喜欢
				guessULikeList: [{
						id: 'dc-1011',
						name: '沙赞',
						poster: 'http://122.152.205.72:88/superhero/DC/Shazam/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/DC/Shazam/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/DC/Shazam/trailer.mp4',
						score: 6.0,
						basicInfo: '美国 2019 动作 奇幻 冒险 院线',
						releaseDate: '上映时间 2019年4月5日'
					},
					{
						id: 'marvel-1016',
						name: '复仇者联盟4:终极之战',
						poster: 'http://122.152.205.72:88/superhero/MARVEL/Avengers4/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/MARVEL/Avengers4/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/MARVEL/Avengers4/trailer.mp4',
						score: 7.3,
						basicInfo: '美国漫威影业公司 动作、科幻',
						releaseDate: '上映时间 2019年4月24日（中国大陆）、2019年4月26日（美国）'
					},
					{
						id: 'xman-1010',
						name: 'X战警:新变种人',
						poster: 'http://122.152.205.72:88/superhero/xman/TheNewMutants/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/xman/TheNewMutants/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/xman/TheNewMutants/trailer.mp4',
						score: 5.5,
						basicInfo: '新异变人、变种人、X战警：新变种人',
						releaseDate: '上映时间 2020年8月28日（美国）'
					},
					{
						id: 'marvel-1020',
						name: '蜘蛛侠2004',
						poster: 'http://122.152.205.72:88/superhero/MARVEL/SpiderMan2004/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/MARVEL/SpiderMan2004/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/MARVEL/SpiderMan2004/trailer.mp4',
						score: 6.9,
						basicInfo: '美国 2019 动作 奇幻 冒险 院线',
						releaseDate: '上映时间 2019年4月5日'
					},
					{
						id: 'marvel-1003',
						name: '复仇者联盟',
						poster: 'http://122.152.205.72:88/superhero/MARVEL/Avengers1/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/MARVEL/Avengers1/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/MARVEL/Avengers1/trailer.mp4',
						score: 8.9,
						basicInfo: '美国 2019 动作 奇幻 冒险 院线',
						releaseDate: '上映时间 2019年4月5日'
					}
				]
			}
		},
		onUnload() {
			// #ifdef APP-PLUS || MP-WEIXIN
			// 页面卸载的时候清除动画数据
			this.animationData = {}
			this.animationDataArr = [{}, {}, {}, {}, {}]
			// #endif
		},
		// 监听下拉刷新
		onPullDownRefresh() {
			uni.showLoading({
				mask: true
			})
			setTimeout(() => {
				uni.hideLoading()
				// 模拟等待发起请求获取数据
				uni.stopPullDownRefresh()
			}, 500)

		},
		// 页面隐藏,暂停视频
		onHide() {
			if (this.videoContext) {
				this.videoContext.pause();
			}
		},
		onLoad() {
			// #ifdef APP-PLUS || MP-WEIXIN
			// 在页面创建的时候,创建一个临时动画对象
			this.animation = uni.createAnimation()
			// #endif
			// 轮播图
			uni.request({
				url: this.serverUrl + '/index/carousel/list',
				method: 'POST',
				success: (res) => {
					if (res.data.status == 200) {
						this.carouselList = res.data.data
					}
				}
			});
			// 热门超英
			uni.request({
				url: this.serverUrl + '/index/movie/hot?type=superhero',
				method: 'POST',
				success: (res) => {
					if (res.data.status == 200) {
						this.hotSuperheroList = res.data.data
					}
				}
			});
			// 热门预告
			uni.request({
				url: this.serverUrl + '/index/movie/hot?type=trailer',
				method: 'POST',
				success: (res) => {
					if (res.data.status == 200) {
						this.hotSuperheroList = res.data.data
					}
				}
			});
			// 猜你喜欢
			uni.request({
				url: this.serverUrl + '/index/guessULike',
				method: 'POST',
				success: (res) => {
					if (res.data.status == 200) {
						this.guessULikeList = res.data.data
					}
				}
			});
		},
		methods: {
			// 播放一个视频的时候，需要暂停其他正在播放的视频
			meIsPlaying(e) {
				var me = this;
				var trailerId = "";
				if (e) {
					trailerId = e.currentTarget.dataset.playingindex;
					me.videoContext = uni.createVideoContext(trailerId);
				}
				var hotTrailerList = me.hotTrailerList;
				for (var i = 0; i < hotTrailerList.length; i++) {
					var tempId = hotTrailerList[i].id;
					if (tempId != trailerId) {
						uni.createVideoContext(tempId).pause();
					}
				}
			},
			// 实现点赞动画效果
			praiseMe(gIndex) {
				// #ifdef APP-PLUS || MP-WEIXIN
				// var gIndex = e.currentTarget.dataset.gindex;
				// 构建动画数据,并且通过step来表示这组动画的完成
				this.animation.translateY(-60).opacity(1).step({
					duration: 400
				})
				// 导出动画数据到vue组件,实现组件的动画效果
				this.animationData = this.animation;
				this.animationDataArr[gIndex] = this.animationData.export();

				// 还原动画,使动画能重复点击
				setTimeout(() => {
					this.animation.translateY(0).opacity(0).step({
						duration: 0
					})
					this.animationData = this.animation;
					this.animationDataArr[gIndex] = this.animationData.export();
				}, 500)
				// #endif
			}
		},
		components: {
			trailerStars
		}
	}
</script>

<style>
	@import url("index.css");
</style>
